<template>
	<view class="p-10">
		<view class="main">
			<my-forms ref="form" :model="formModel" :label-position="'top'" :formItem="formData" :disabled="true" label-width="120px">
				<template #states>
					<text class="fw" :style="{ color: formModel.states == 1 ? 'green' : formModel.states == 0 ? 'red' : '', fontSize: '20px' }">
						{{ stateList.find((i) => i.dictValue == formModel.states)?.dictLabel }}
					</text>
				</template>
				<template #violatorsId>
					<my-select disabled v-model="formModel.violatorsId" @change="getViolators" :list="workerList" :fileType="{ label: 'code', value: 'id' }"></my-select>
				</template>
				<template #pictureList>
					<view class="flex" style="flex-wrap: wrap; gap: 8px">
						<up-image v-for="(item, index) in formModel?.pictureList" :key="index" :show-loading="true" :src="item?.downloadUrl" width="90px" height="90px"></up-image>
					</view>
				</template>
				<template #reportId>
					<my-select disabled v-model="formModel.reportId" @change="getViolators1" :list="reqportList" :fileType="{ label: 'code', value: 'id' }"></my-select>
				</template>
				<template #reportIds>
					<my-select disabled v-model="formModel.reportIds" :clear="true" @change="getSecReport" :list="secReportList" :collapseTags='true' :collapseTagsNum='3' :multiple='true' :fileType="{ label: 'code', value: 'id',disabled:'disabled' }"></my-select>
				</template>
				<template #secReportList>
					<uni-table ref="Reporttable" emptyText="暂无更多数据" stripe >
						<uni-tr>
							<uni-th align="center" width="60">序号</uni-th>
							<uni-th align="center" width="160">上报人工号</uni-th>
							<uni-th align="center" width="100">上报人姓名</uni-th>
							<uni-th align="center" width="100">上报人岗位</uni-th>
							<uni-th align="center" width="100">上报人职务</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in ReporttableData" :key="index">
							<uni-td align="center" style="fontsize: 12px !important">
								{{ index+1 }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secId }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secName }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secPos }}
							</uni-td>
							<uni-td align="center" style="fontsize: 12px !important">
								{{ item.secDuty }}
							</uni-td>
							
						</uni-tr>
					</uni-table>
				</template>
			</my-forms>

			<view class="m-t-20">
				<view class="m-b-8" style="font-size: 14px; color: #606266">提交记录</view>
				<uni-table ref="table" emptyText="暂无更多数据" stripe>
					<uni-tr>
						<uni-th align="center" width="100">提交时间</uni-th>
						<uni-th align="center" width="80">提交人</uni-th>
						<uni-th align="center" width="100">驳回时间</uni-th>
						<uni-th align="center" width="100">驳回处理人</uni-th>
						<uni-th align="center" width="150">驳回理由</uni-th>
						<uni-th align="center" width="100">通过时间</uni-th>
						<uni-th align="center" width="80">通过人</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.upTime }}
						</uni-td>
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.upPeople }}
						</uni-td>
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.returnTime }}
						</uni-td>
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.returnPeople }}
						</uni-td>
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.returnReason }}
						</uni-td>
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.passTime }}
						</uni-td>
						<uni-td align="center" style="fontsize: 12px !important">
							{{ item.passPeople }}
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<u-button class="m-t-20" v-if="formModel.states != 1 && isIf != 1" type="primary" shape="circle" text="修改" @click="goEdit()"></u-button>
			<view class="flex" style="gap: 10px" v-if="isIf == 1">
				<u-button class="m-t-20" type="error" shape="circle" text="驳回" @click="refusalFn()"></u-button>
				<u-button class="m-t-20" type="primary" shape="circle" text="通过" @click="passFn()"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDicts } from '@/api/public.js';
import { pageStaff, postUpdateState, listWorker, listReporter,getUseStaff } from '@/api/manage.js';

let isIf = ref();
onLoad((e) => {
	formModel.value = JSON.parse(e.data);
	tableData.value = JSON.parse(e.data)?.returnList;
	e.isIf ? (isIf.value = JSON.parse(e.isIf)) : '';
	loadData();
});

// 校验表单数据
let formData = computed(() => {
	return [
		{
			label: '审批状态',
			prop: 'states'
		},
		{
			label: '违章人员工号',
			prop: 'violatorsId'
		},
		{
			label: '违章人员姓名',
			prop: 'breakName',
			disabled: true
		},
		{
			label: '违章人员岗位',
			prop: 'breakPosition',
			disabled: true
		},
		{
			label: '违章人员职位',
			prop: 'breakDuty',
			disabled: true
		},
		{
			label: '违章人员区队',
			prop: 'breakTeam',
			disabled: true
		},
		{
			label: '违章人员科室',
			prop: 'breakRoom',
			disabled: true
		},
		{
			label: '违章地点',
			prop: 'breakLocation',
			disabled: true
		},
		{
			label: '违章时间',
			prop: 'breakTime',
			disabled: true
		},
		{
			label: '危害类型',
			prop: 'damage',
			disabled: true
		},
		{
			label: '事件类型',
			prop: 'event',
			disabled: true
		},
		{
			label: '违章条款',
			prop: 'violationClause',
			disabled: true
		},
		{
			label: '条款类型',
			prop: 'item',
			disabled: true
		},
		{
			label: '现场照片',
			prop: 'pictureList',
			disabled: true
		},
		{
			label: '备注',
			prop: 'remark',
			type: 'textarea',
			disabled: true
		},
		{
			label: '上报人工号',
			prop: 'reportId',
			disabled: true
		},
		{
			label: '上报人姓名',
			prop: 'reportName',
			disabled: true
		},
		{
			label: '上报人岗位',
			prop: 'reportPosition',
			disabled: true
		},
		{
			label: '上报人职位',
			prop: 'reportDuty',
			disabled: true
		},
		// {
		// 	label: '上报人区队',
		// 	prop: 'reportTeam',
		// 	disabled: true
		// },
		// {
		// 	label: '上报人科室',
		// 	prop: 'reportRoom',
		// 	disabled: true
		// },
		// {
		// 	label: '驳回理由',
		// 	prop: 'rejectReason',
		// 	show: (formModel.value.states == 0 || formModel.value.states == 3) && isIf.value != 1,
		// 	disabled: true
		// }
		{
			label: '副上报人工号',
			prop: 'reportIds',
			required: true
		},
		{
			label: '上报人列表',
			prop: 'secReportList',
		}
	];
});

const form = ref(null);
const formModel = ref({});

//提交记录table
let table = ref(null);
let tableData = ref([]);

//进入编辑
function goEdit() {
	uni.navigateTo({
		url: '/pages/manage/edit?data=' + JSON.stringify(formModel.value)
	});
}

let stateList = ref([]);
let violatorsList = ref([]);
let workerList = ref([])
let reqportList = ref([])

function getViolators(val) {
	let obj = violatorsList.value.find((item) => item.id == val);
	formModel.value.breakName = obj?.name;
	formModel.value.breakPosition = obj?.postName;
	formModel.value.breakDuty = obj?.dutiesName;
	formModel.value.breakTeam = obj?.teamName;
	formModel.value.breakRoom = obj?.sectionName;
}
function getViolators1(val) {
	let obj = violatorsList.value.find((item) => item.id == val);
	formModel.value.reportName = obj?.name;
	formModel.value.reportPosition = obj?.postName;
	formModel.value.reportDuty = obj?.dutiesName;
	formModel.value.reportTeam = obj?.teamName;
	formModel.value.reportRoom = obj?.sectionName;
}


function getSecReport(val){
	ReporttableData.value = []
	val.forEach(item=>{
		let obj = violatorsList.value.find((item2) => item2.id == item.value)
		let obj2 = {}
		Object.assign(obj2,{
			secId:obj.id,
			secName:obj.name,
			secPos:obj.postName,
			secDuty:obj.dutiesName
		})
		ReporttableData.value.push(obj2)
	})
}

//其他上报人下拉
let secReportList = computed(()=>{
	return reqportList.value.map(item=>{
		if(item.id == formModel.value.reportId){
			return{
				...item,
				disabled:true
			}
		}else{
			return item
		}
	})
})

//其他上报人人table
let Reporttable = ref(null);
let ReporttableData = ref([]);

//数据请求
function loadData() {
	getDicts('approval_state').then((res) => {
		stateList.value = res.data.map((item) => ({
			dictLabel: item.dictLabel,
			dictValue: item.dictValue
		}));
	});
	pageStaff({ needCount: 1 }).then((res) => {
		violatorsList.value = res.data;
		getViolators(formModel.value.violatorsId);
		getViolators1(formModel.value.reportId);
		getSecReport(formModel.value.reportIds)
	});
	
	listWorker().then(res => {
		workerList.value = res.data
	})
	
	listReporter().then(res => {
		reqportList.value = res.data
	})
	
}

// 驳回
function refusalFn() {
	uni.navigateTo({
		url: '/pages/manage/refusal?data=' + JSON.stringify(formModel.value)
	});
}
// 通过
function passFn() {
	form.value.$refs.refMyForm
		.validate()
		.then(async (res) => {
			postUpdateState([{ ...formModel.value, approvalStatus: 0, proId: formModel.value.id }]).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: `审批通过`
					});
					uni.navigateBack({
						delta: 1 // 返回的页面数，如果是1则返回上一页
					});
				} else {
					uni.showToast({
						icon: 'fail',
						title: res.msg
					});
				}
			});
		})
		.catch((err) => {
			uni.showToast({
				icon: 'error',
				title: err[0].errorMessage
			});
		});
}
</script>

<style lang="scss" scoped>
.main {
	background-color: white;
	padding: 10px;
	border-radius: 10px;
}
</style>
